<template>
  <div class="user-profile">
    <a-spin :spinning="loading">
      <a-card title="用户详情">
        <template #extra>
          <a-space>
            <a-button @click="$router.back()">返回</a-button>
            <a-button v-if="canEdit" type="primary" @click="handleEdit">编辑</a-button>
          </a-space>
        </template>

        <a-descriptions bordered :column="2">
          <a-descriptions-item label="用户ID">{{ userDetail.id || '-' }}</a-descriptions-item>
          <a-descriptions-item label="用户名">{{ userDetail.username || '-' }}</a-descriptions-item>
          <a-descriptions-item label="邮箱">{{ userDetail.email || '-' }}</a-descriptions-item>
          <a-descriptions-item label="姓名">
            {{ userDetail.first_name || '' }} {{ userDetail.last_name || '' }}
          </a-descriptions-item>
          
          <a-descriptions-item label="学号">{{ userDetail.profile?.student_id || '-' }}</a-descriptions-item>
          <a-descriptions-item label="性别">{{ userDetail.profile?.gender || '-' }}</a-descriptions-item>
          <a-descriptions-item label="专业">{{ userDetail.profile?.major || '-' }}</a-descriptions-item>
          <a-descriptions-item label="班级">{{ userDetail.profile?.class_name || '-' }}</a-descriptions-item>
          
          <a-descriptions-item label="手机号">{{ userDetail.profile?.phone || '-' }}</a-descriptions-item>
          <a-descriptions-item label="部门">{{ userDetail.profile?.department || '-' }}</a-descriptions-item>
          <a-descriptions-item label="职位">{{ userDetail.profile?.position || '-' }}</a-descriptions-item>
          <a-descriptions-item label="工号">{{ userDetail.profile?.employee_id || '-' }}</a-descriptions-item>
          
          <a-descriptions-item label="上级主管">
            {{ userDetail.profile?.supervisor_name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="入职日期">{{ userDetail.profile?.hire_date || '-' }}</a-descriptions-item>
          
          <a-descriptions-item label="账号状态">
            <a-tag :color="userDetail.is_active ? 'green' : 'red'">
              {{ userDetail.is_active ? '正常' : '已禁用' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="管理员权限">
            <a-tag :color="userDetail.is_staff ? 'blue' : 'default'">
              {{ userDetail.is_staff ? '是' : '否' }}
            </a-tag>
          </a-descriptions-item>
          
          <a-descriptions-item label="创建时间" :span="2">
            {{ userDetail.profile?.created_at || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="2">
            {{ userDetail.profile?.remarks || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { userAPI, type UserDetail } from '@/api/user'

const router = useRouter()
const route = useRoute()
const loading = ref(false)

const userDetail = ref<UserDetail>({
  id: 0,
  username: '',
  email: '',
  first_name: '',
  last_name: ''
})

// 判断是否可以编辑（管理员或本人）
const canEdit = computed(() => {
  const currentUser = JSON.parse(localStorage.getItem('user') || '{}')
  return currentUser.is_staff || currentUser.id === userDetail.value.id
})

const handleEdit = () => {
  router.push(`/users/edit/${route.params.id}`)
}

// 加载用户数据
const loadUserProfile = async () => {
  loading.value = true
  try {
    const res = await userAPI.getUserDetail(Number(route.params.id))
    userDetail.value = res.data
  } catch (error: any) {
    message.error('加载用户信息失败: ' + (error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadUserProfile()
})
</script>

<style scoped>
.user-profile {
  padding: 0;
}
</style>
